<template>
    <div class="goods-list-container">
        <van-cell class="good-item" v-for="item in goodsList" :key="item.proid" @click="handleCellClick(item.proid)">
            <div class="item-image">
                <img :src="item.img1" alt="" />
            </div>
            <div class="item-info ignore">
                <p class="item-intro van-multi-ellipsis--l2">
                    {{ item.proname }}
                </p>
                <p class="item-price">
                    ￥<span class="price-value">{{ item.originprice }}</span>
                </p>
            </div>
        </van-cell>
    </div>
</template>

<script setup lang="ts">
import { useHomeGoodsList } from '@/hooks/useListItem'

import { useRouter } from 'vue-router'
const router = useRouter()

const goodsList = useHomeGoodsList()
const handleCellClick = (ids: any) => {
    console.log(ids)
    // 路由跳转
    // router.push({
    //     name: 'detail', query: {
    //         proid: ids
    //     }
    // })
    router.push(`/detail/${ids}`)
}

</script>

<style scoped lang="scss">
.goods-list-container {
    // background: orangered;
    margin: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

    // min-width: 320px;
    .good-item {
        width: 48%;
        margin: 8px 0;
        border-radius: 5px;
        overflow: hidden;
        // background: lightcyan;
        padding: 0;

        .item-image {
            width: 100%;

            img {
                width: 100%;
            }
        }

        .ignore {
            p {
                margin: 0;
                padding: 0;
                text-align: left;
            }

            .item-intro {
                height: 36px;
                /*no*/
                font-size: 13px;
                /*no*/
                line-height: 36px;
                /*no*/
                overflow: hidden;
                // 以下代码可以实现多行文本显示...
                text-overflow: ellipsis;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                display: -moz-box;
                -moz-line-clamp: 2;
                -moz-box-orient: vertical;
                word-wrap: break-word;
                word-break: break-all;
                white-space: normal;
            }

            .item-price {
                font-weight: bold;
                font-size: 12px;
                color: #ee0a24;
                margin: 5px 0;

                .price-value {
                    font-size: 16px;
                }
            }
        }
    }
}
</style>